import { onMounted, ref, computed, watch, reactive } from 'vue'
import * as echarts from 'echarts'

// 地质信息图表
export const useGeologyCharts = ({ id }) => {
	let option = {
		legend: {
			show: true
		},
		grid: {
			top: 28,
			bottom: 30,
			left: 40,
			right: 20
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: [0, 300, 600, 900, 1200, 1500, 1800, 2100]
		},
		yAxis: {
			name: '海拔(m)',
			boundaryGap: [0, '30%'],
			axisLabel: {
				// margin: 6,
			}
		},
		visualMap: {
			type: 'piecewise',
			show: false,
			dimension: 0,
			seriesIndex: 0,
			padding: 0,
			pieces: [
				{
					gt: 0,
					lt: 1,
					color: '#E16666'
				},
				{
					gt: 1,
					lt: 2,
					color: '#4785FF'
				},
				{
					gt: 2,
					lt: 10,
					color: '#41CE80'
				}
			]
		},
		series: [
			{
				type: 'line',
				silent: true,
				smooth: 0.5,
				symbol: 'none',
				lineStyle: {
					width: 1
				},
				markLine: {
					symbol: ['none', 'none'],
					label: {
						show: true
					},
					data: [
						[
							{
								name: 'S1背斜',
								coord: [3, 0]
							},
							{
								coord: [3, 1500]
							}
						],
						[
							{
								name: 'S2向斜',
								coord: [4, 0]
							},
							{
								coord: [4, 1500]
							}
						],
						[
							{
								name: 'S3背斜',
								coord: [6, 0]
							},
							{
								coord: [6, 1500]
							}
						]
					]
				},
				areaStyle: {
					opacity: 1
				},
				data: [600, 500, 600, 700, 800, 900, 1000, 1100]
			},
			{
				type: 'line',
				smooth: 0.5,
				silent: true,
				symbol: 'none',
				lineStyle: {
					width: 1
				},
				areaStyle: {
					color: '#05161f',
					opacity: 1
				},
				data: [200, 100, 200, 350, 480, 640, 700, 820]
			}
		]
	}
	const loading = ref(false)
	let chart = ref(null)
	const init = () => {
		loading.value = true
		const dom = document.getElementById(id)
		chart.value = echarts.init(dom)
		setTimeout(() => {
			loading.value = false
			chart.value.setOption(option)
		}, 1000)
	}
	onMounted(() => {
		init()
	})

	return reactive({
		chart,
		loading
	})
}

// 循环割煤曲线图标
export const useCoalCuttingChart = ({ id }) => {
	let base = +new Date(1968, 9, 3)
	let oneDay = 24 * 3600 * 1000
	let date = []
	let data = []
	let data1 = []
	for (let i = 1; i < 100; i++) {
		var now = new Date((base += oneDay))
		date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
		data.push(Math.random() * 200).toFixed(3)
		data1.push(Math.random() * 200).toFixed(3)
	}
	let option = {}
	const loading = ref(false)
	let chart = ref(null)
	const init = () => {
		loading.value = true
		const dom = document.getElementById(id)
		chart.value = echarts.init(dom)
		setTimeout(() => {
			loading.value = false
			option = {
				grid: {
					top: 28,
					bottom: 30,
					left: 40,
					right: 20
				},
				tooltip: {
					trigger: 'axis',
					position: function (pt) {
						return [pt[0], '10%']
					}
				},

				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: date
				},
				yAxis: {
					name: '支架位置',
					type: 'value',
					boundaryGap: [0, '100%']
				},

				series: [
					{
						name: '今日',
						type: 'line',
						symbol: 'none',
						sampling: 'lttb',
						itemStyle: {
							color: '#3AB973'
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: '#3AB973',
									opacity: '0.5'
								},
								{
									offset: 1,
									color: '#3AB973',
									opacity: '0'
								}
							])
						},
						data: data
					},
					{
						name: '昨日',
						type: 'line',
						symbol: 'none',
						sampling: 'lttb',
						itemStyle: {
							color: '#397BFD'
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: '#397BFD',
									opacity: '0.5'
								},
								{
									offset: 1,
									color: '#397BFD',
									opacity: '0'
								}
							])
						},
						data: data1
					}
				]
			}
			chart.value.setOption(option)
		}, 1000)
	}
	onMounted(() => {
		init()
	})

	return reactive({
		chart,
		loading
	})
}
